import { StyleSheet, Text, View, Pressable } from 'react-native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { NavBarHeader } from '~/components';
import { userStore } from '~/store';
import { px2dp, scale, width } from '~/utils/px2dp';

export default function DestroyAccount() {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const singOut = () => {
        userStore.signOut();
        navigation.navigate('Introduction');
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('DestroyAccount.title')} />
            <View style={styles.content}>
                <Text style={styles.title}>{t('DestroyAccount.t1')}</Text>
            </View>
            <View style={styles.bottom}>
                <Pressable style={styles.bootom_button} onPress={singOut}>
                    <Text style={styles.bootom_buttonText}>{t('DestroyAccount.t2')}</Text>
                </Pressable>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        flexGrow: 1,
        margin: px2dp(24),
    },
    title: {
        color: '#000',
        lineHeight: px2dp(40),
        fontSize: scale(28),
    },
    bottom: {
        paddingVertical: px2dp(60),
        position: 'absolute',
        bottom: 0,
        width: width,
    },
    bootom_button: {
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(999),
        height: px2dp(100),
        marginHorizontal: px2dp(32),
    },
    bootom_buttonText: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
